<template>
    <div class="tabBarItem"
         @click="handleItemClick">
        <div class="tabBarItemIconWrapper">
            <i class="iconfont"
               :class="[itemIconClass,ActiveStauts ? 'tabBarItemFontActive':'']" />
        </div>
        <div class="tabBarItemFont"
             :class="ActiveStauts ? 'tabBarItemFontActive':''">{{itemName}}</div>
    </div>
</template>
<script>
export default {
    props: {
        itemName: String,
        itemIconClass: String,
        path: String
    },
    data () {
        return {

        }
    },
    computed: {
        ActiveStauts () {
            return this.$route.path.indexOf(this.path) !== -1;
        }
    },
    methods: {
        handleItemClick: function () {
            if (this.$route.path.indexOf(this.path) === -1) {
                this.$router.replace(this.path);
            }
        }
    }
}
</script>
<style scoped>
.tabBarItem {
    flex: 1;
    height: 49px;
    text-align: center;
    font-size: 14px;
}

.tabBarItem > .tabBarItemIconWrapper {
    margin-top: 5px;
    vertical-align: middle;
    margin-bottom: 5px;
}

.tabBarItem > .tabBarItemFont {
    font-size: 12px;
}

.tabBarItemFontActive {
    color: deepPink;
}
</style>

